<template>
    <div class="View">
        <div class="row" style="align-items: flex-start;">
            <!-- <div class="label">
                抽出期間
            </div>
            <el-input type="textarea" class="ipt" :rows="2" placeholder="" resize="none">
            </el-input> -->
        </div>
        <div class="row"
            style="justify-content: flex-end;border-top: 1px solid #D9D9D9;border-bottom: 1px solid #D9D9D9;padding: 8px 0;margin: 15px 0;width: 525px;">
            <el-radio-group v-model="thickRes.corrResCondFlag">
                <el-radio :label="1">AND</el-radio>
                <el-radio :label="2">OR</el-radio>
            </el-radio-group>
        </div>

        <div class="titleCheck" style=" font-weight: 600;">{{ $t('message.homeExt.tab3.label_9') }}</div>
        <div class="titleCheck " style="margin-top: 12px;">
            <el-checkbox v-model="thickRes.residualLifeCalcFlag" :label="1" @change="changeFn(1)">{{
                $t('message.homeExt.tab3.label_10') }}</el-checkbox>
        </div>
        <div class="" style="margin: 12px 0 0 40px;border-bottom: 1px solid #D9D9D9;padding-bottom: 12px;">
            <div style="border:1px solid #D9D9D9;padding: 5px;" class="ra">
                <el-checkbox v-model="thickRes.residualLifeCalcLongTermFlag" @change="changeFn(3)">{{
                    $t('message.homeExt.tab3.label_11') }}</el-checkbox>
                <el-checkbox v-model="thickRes.residualLifeCalcShortTermFlag" @change="changeFn(3)">{{
                    $t('message.homeExt.tab3.label_12') }}</el-checkbox>
                <el-checkbox v-model="thickRes.residualLifeCalcMinMultFlag" @change="changeFn(3)">{{
                    $t('message.homeExt.tab3.label_13') }}</el-checkbox>
            </div>
        </div>

        <el-checkbox class="mt16 " v-model="thickRes.corrReteFlag">{{ $t('message.homeExt.tab3.label_2')
            }}</el-checkbox>
        <div class="titleCheck">
            <div class="tt" v-show="thickRes.corrReteFlag">
                <span>
                    {{ $t('message.homeExt.tab3.label_3') }}
                </span>
                <el-select class="ipt orange" v-model="thickRes.corrReteCode" placeholder=" ">
                    <el-option v-for="item in thickResCom.corrRateSearchList" :key="item.value" :label="item.key"
                        :value="item.key">
                    </el-option>
                </el-select>
                <el-input class="ipt orange right" placeholder="" v-model="thickRes.corrReteStr"
                    @input="thickRes.corrReteStr = $setMyNum(thickRes.corrReteStr, '3 - 2')">
                </el-input>
                <span>
                    mm/y
                </span>
            </div>
        </div>

        <el-checkbox v-model="thickRes.baseValComparFlag" class="mt16">{{ $t('message.homeExt.tab3.label_4')
            }}</el-checkbox>
        <div class="titleCheck ">
            <div class="tt" style="border-bottom: 0;" v-show="thickRes.baseValComparFlag">
                <span>
                    {{ $t('message.homeExt.tab3.label_14') }}
                </span>
                <el-select class="ipt" :class="thickRes.baseValCompar1Code ? 'orange' : ''"
                    v-model="thickRes.baseValCompar1Code" placeholder=" ">
                    <el-option v-for="item in thickResCom.comparOList" :key="item.value" :label="item.key"
                        :value="item.key">
                    </el-option>
                </el-select>
                <el-select class="ipt" :class="thickRes.baseValCompar1Code ? 'orange' : ''"
                    v-model="thickRes.baseValCompar11Code" placeholder=" ">
                    <el-option v-for="item in thickResCom.comparTList" :key="item.value" :label="item.label"
                        :value="item.key">
                    </el-option>
                </el-select>
                <em style="margin:0 8px 0 -8px">+</em>
                <el-input class="ipt right right" :class="thickRes.baseValCompar1Code ? 'orange' : ''" placeholder=""
                    v-model="thickRes.baseValCompar1Str"
                    @input="thickRes.baseValCompar1Str = $setMyNum(thickRes.baseValCompar1Str, '3 - 2')">
                </el-input>
                <em>mm</em>
            </div>
            <div class="tt" style="margin-top: -5px;" v-show="thickRes.baseValComparFlag">
                <span style="text-align: right;padding-right: 16px;">
                    or
                </span>
                <el-select class="ipt" :class="thickRes.baseValCompar2Code ? 'orange' : ''"
                    v-model="thickRes.baseValCompar2Code" placeholder=" ">
                    <el-option v-for="item in thickResCom.comparSecList" :key="item.value" :label="item.key"
                        :value="item.key">
                    </el-option>
                </el-select>
                <span style="text-align: right;margin-right: 16px;">{{ $t('message.homeExt.tab3.label_6') }}</span>
                <em style="margin:0 8px 0 -8px">x</em>
                <el-input class="ipt right" :class="thickRes.baseValCompar2Code ? 'orange' : ''" placeholder=""
                    v-model="thickRes.baseValCompar2Str"
                    @input="thickRes.baseValCompar2Str = $setMyNum(thickRes.baseValCompar2Str, '2 - 0')">
                </el-input>
                <em>%</em>
            </div>
        </div>


        <div
            style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;max-width: 530px;">
            <el-checkbox v-model="thickRes.lifeSearchFlag">{{ $t('message.homeExt.tab3.label_7') }}</el-checkbox>
            <div><span style="padding-right: 10px;">{{ $t('message.homeExt.tab3.label_15') }}</span> {{
                thickResCom.baseYear
                }}</div>
        </div>
        <div class="titleCheck">
            <div class="tt" v-show="thickRes.lifeSearchFlag">
                <span>
                    {{ $t('message.homeExt.tab3.label_8') }}
                </span>
                <el-select class="ipt orange" v-model="thickRes.lifeSearchCode" placeholder=" ">
                    <el-option v-for="item in thickResCom.lifeSearchList" :key="item.value" :label="item.key"
                        :value="item.key">
                    </el-option>
                </el-select>
                <el-input class="ipt orange right" placeholder="" v-model="thickRes.lifeSearchStr"
                    @input="thickRes.lifeSearchStr = $setMyNum(thickRes.lifeSearchStr, '2 - 0')">
                </el-input>
                <span>
                    Year
                </span>
            </div>
        </div>



    </div>
</template>

<script>
import $ from "jquery";
export default {
    name: "RetrievalTab3",
    props: ['thickRes', 'thickResCom'],
    data() {
        return {

        };
    },
    components: {},
    watch: {},
    methods: {
        changeFn(f) {
            const { thickRes } = this;
            const { residualLifeCalcFlag, residualLifeCalcLongTermFlag, residualLifeCalcShortTermFlag, residualLifeCalcMinMultFlag } = thickRes;
            if (f === 1 && residualLifeCalcFlag) {
                Object.assign(thickRes, {
                    residualLifeCalcLongTermFlag: false,
                    residualLifeCalcShortTermFlag: false,
                    residualLifeCalcMinMultFlag: false
                });
            }
            if (f === 3 && (residualLifeCalcLongTermFlag || residualLifeCalcShortTermFlag || residualLifeCalcMinMultFlag)) {
                thickRes.residualLifeCalcFlag = false;
            }
        },
        async save() {
            console.log(this.thickRes, '33333');
            console.log(this.thickResCom, '33333');
        },
    },
    created() { },
    mounted() {

    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    padding: 0 10px 0 16px;
    overflow-x: hidden;
}

.row {
    width: 100%;
    display: flex;
    // justify-content: start;
    padding: 7px 0;
    align-items: center;

    .label {
        // width: 145px;
        min-width: 145px;
        height: 32px;
        display: flex;
        align-items: center;
    }

    .ipt {
        width: 380px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;

        }
    }

    .long-ipt {
        width: 380px;
        height: 32px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;
        }

        ::v-deep .el-input__inner:focus {
            border: 1px solid #dcdfe6;
        }

        ::v-deep .el-input__icon {
            line-height: 32px;
            color: #909399;
        }

        ::v-deep .el-input__suffix {
            width: 32px;
            right: 0;
            background: #dee0e3;
        }
    }

    .picker {
        width: 175px;
        height: 32px;
        // margin: 0px 10px;

        ::v-deep .el-input__inner {
            width: 100%;
            height: 32px;
        }

        ::v-deep .el-input__suffix {
            background: transparent;
        }

        ::v-deep .el-input__icon {
            line-height: 100%;
        }
    }

}

.mt16 {
    margin-top: 16px;
}

.titleCheck {
    padding-left: 40px;


    .tt {
        display: flex;
        align-items: center;
        margin-top: 12px;
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 16px;

        span {
            width: 97px;
        }

        .ipt {
            width: 97px;
            height: 32px;
            margin: 0 16px 0 0;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .orange {
            margin: 0 16px 0 0;

            ::v-deep .el-input__inner {
                background-color: #FEDDB1;
                width: 97px;
            }
        }
    }

    .ra {
        box-sizing: border-box;
        width: 485px;
    }

    .right {

        ::v-deep .el-input__inner {
            text-align: right;

        }
    }
}
</style>